<template>
	<view style="background-color: #f5f5f5; min-height: 100%; height: auto;">
		<!-- 地址选择 -->
		<view class="main-bg-color text-white d-flex a-center px-3" style="height:250rpx;" hover-class="main-bg-hover-color"  @click="openAddressList">
			<view>
				<template v-if="address">
					<view class="font-weight font-md d-flex a-center">
					{{address.name}} {{address.phone}} <view class="border border-white rounded px-1 font ml-2" v-if="address.isdefault">默认</view>
				</view>
				<view class="font">
					{{address.address}} {{address.detail}}
				</view>
				</template>
				<template v-else>
					<view class="font-weight font-md d-flex a-center">
						请选择收货地址
					</view>
				</template>
			</view>
			<view class="iconfont icon-113fangxiang_xiangyou ml-auto"></view>
		</view>
		<view class="" style="border-top-left-radius: 40rpx; border-radius: 40rpx;margin-top: -25rpx;overflow: hidden;">
			<view style="height: 800rpx;" class="bg-white">
				<uni-list-item showArrow>
					<view class="d-flex a-center">
						<image src="/static/images/demo/demo6.jpg" mode="" style="width: 100rpx;height: 100rpx;" class="rounded mr-2"></image>
						<image src="/static/images/demo/demo6.jpg" mode="" style="width: 100rpx;height: 100rpx;" class="rounded mr-2"></image>
						<image src="/static/images/demo/demo6.jpg" mode="" style="width: 100rpx;height: 100rpx;" class="rounded mr-2"></image>
					</view>
					<view class="" slot="rightContent">共3件</view>
				</uni-list-item>
				<uni-list-item title="商品总价" :showArrowIcon="false">
					<view class="" slot="rightContent">
						<price color="text-dark">357.00</price>
					</view>
				</uni-list-item>
				<uni-list-item title="运费" :showArrowIcon="false">
					<view class="" slot="rightContent">包邮</view>
				</uni-list-item>
				<navigator url="/pages/order-coupon/order-coupon">
				<uni-list-item title="优惠券">
					<view class="text-light-muted" slot="rightContent">无可用</view>
				</uni-list-item>
				</navigator>
				<uni-list-item :showArrowIcon="false">
					<text class="main-text-color">小计</text>
					<view class="text-light-muted" slot="rightContent">
						<price>357.00</price>
					</view>
				</uni-list-item>
				<divider />
				<uni-list-item title="发票" extraWidth="40%">
					<view slot="rightContent" @click="openOrderInvoice">电子发票-个人</view>
				</uni-list-item>
			</view>
		</view>
		<view class="position-fixed d-flex a-center j-end border bottom-0 left-0 right-0 bg-white p-2 font-md">
			合计:<view class="ml-2">
				<price>249.00</price>
			</view>
			<view class="ml-2 px-4 py-1 main-bg-color text-white font-md" hover-class="main-bg-hover-color" style="border-radius: 80rpx;" @click="openPayMethods">
				去支付
			</view>
		</view>
	</view>
	
</template>

<script>
	import {mapGetters} from "vuex"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	export default {
		components:{
			uniListItem
		},
		data() {
			return {
				address:false
			}
		},
		computed:{
			...mapGetters(['defaultAddress'])
		},
		onLoad() {
			if(this.defaultAddress.length){
				this.address = this.defaultAddress[0]
			}
			// 开启监听选择收货地址事件
			uni.$on('chooseAddress',(res)=>{
				console.log('接收到参数',res);
				this.address = res
			})
		},
		onUnload() {
			// 关闭监听选择收货地址事件
			uni.$off('chooseAddress',(e)=>{
				console.log('关闭监听选择收货地址事件');
			})
		},
		methods: {
			openAddressList(){
				uni.navigateTo({
					url: "/pages/user-address/user-address?type=choose",
				});
			},
			openOrderInvoice(){
				uni.navigateTo({
					url: "/pages/order-invoice/order-invoice",
				});
			},
			openPayMethods(){
				uni.navigateTo({
					url: "/pages/pay-methods/pay-methods",
				});
			}
		}
	}
</script>

<style>

</style>
